<template>
  <div class="container">
    <!--头部筛选 start-->
    <div class="flex-row justify-between p_b10">
      <div>
        <el-input size="small" v-model="params.filter" placeholder="搜索关键词..." class="m_r10 width200"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="onPageChange(1)"></el-button>
        <el-button size="small" type="primary" @click="onPageChange(1)">刷新</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" @click="toggleEditorModal(true)">新增</el-button>
      </div>
    </div>
    <!--头部筛选 end-->

    <!--列表数据 start-->
    <el-table :data="tableData" border size="mini">
      <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
        <template v-slot="{row}">
          <el-tag type="info" v-if="row.sex==='male'">男</el-tag>
          <el-tag type="info" v-else>女</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="password" label="登录密码"></el-table-column>
      <el-table-column prop="identityNumber" label="身份证"></el-table-column>
      <el-table-column prop="treatTime" label="就趁时间"></el-table-column>
      <el-table-column prop="diseaseName" label="疾病名称"></el-table-column>
      <el-table-column prop="orderList" width="280" label="就趁记录">
        <template #default="{row}">
          <p v-for="(item,i) of row.orderList||[]" :key="i">
            【{{ item.doctorName }}】医生于 {{ item.createTime }} 接诊
          </p>
        </template>
      </el-table-column>

      <el-table-column label="操作" :width="120" align="center" fixed="right">
        <template #default="{row}">
          <el-button type="text" icon="el-icon-edit" @click="toggleEditorModal(true,row)" size="mini">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" @click="onDestroy(row)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表数据 end-->


    <!--分页组件 start-->
    <div class="pagination">
      <el-pagination
          background layout="total, prev, pager, next"
          :current-page="pageMeta.current_page"
          :page-size="pageMeta.limit" :total="pageMeta.total"
          @current-change="onPageChange"></el-pagination>
    </div>
    <!--分页组件 end-->
    <!--分类编辑、新增弹框 start-->
    <el-dialog
        v-model="formData.show"
        :title="formData.data.id>0?'编辑':'新增'"
        width="50%">
      <el-form
          ref="formRefName"
          :rules="rules"
          :model="formData.data" label-width="120px">
        <el-form-item label="姓名" prop="name">
          <el-input maxlength="20" v-model="formData.data.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input :maxlength="11" v-model="formData.data.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formData.data.sex">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number :min="1" :max="140" placeholder="年龄" v-model="formData.data.age"></el-input-number>
        </el-form-item>
        <el-form-item label="身份证号" prop="identityNumber">
          <el-input maxlength="18" v-model="formData.data.identityNumber" placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input maxlength="18" v-model="formData.data.password" placeholder="密码"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="toggleEditorModal(false)">取消</el-button>
          <el-button size="small" type="primary" @click="onSubmit()">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!--分类编辑、新增弹框 end-->
  </div>


</template>

<script>
import {computed, defineComponent, reactive, ref, toRaw} from "vue"
import {usePageMeta} from "../../hooks/usePageTableData";
import {deepClone, isCard} from "../../utils/helpers";
import Toast from "../../utils/Toast";
import Patient from "../../api/modules/Patient";
import {useStore} from "vuex";
import {RoleTypes} from "../../hooks/user/useUserLogin";
import dayjs from "dayjs";

export default defineComponent({
  name: "Patient",
  data() {
    return {
      // 表单路由验证规则 参考： https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C
      rules: {
        name: [
          {required: true, message: "请填写姓名"},
        ],
        phone: [
          {
            required: true, message: "请填正确的手机号码", validator: (rule, value) => {
              return /1\d{10}/.test(value);
            }
          },
        ],
        identityNumber: [
          {
            required: true, message: "请填正确的身份证号", validator: (rule, value) => {
              return isCard(value);
            }
          }
        ],
        password: [
          {required: true, message: "请填写密码"},
        ],
      },
    }
  },
  setup() {
    const store = useStore();
    const userInfo = computed(() => store.state.user.userInfo)
    const formRefName = ref(null);
    const pageHandle = usePageMeta(); // 公共的分页表单数据
    const params = reactive({
      filter: "",
    });
    const tableData = ref([]);


    onPageChange(1); // 初始化时直接请求一次分类列表

    const formData = reactive({ // 新增编辑弹框的表单数据
      show: false, // 是否打开表单
      data: {
        id: 0, // id===0:新增操作，id>0:编辑操作
        name: '', // 姓名
        phone: '', // 手机号
        sex: 'male', // 性别 male\female
        age: 18, // 年龄
        identityNumber: '', // 身份证号
        password: '', // 密码
      }
    });

    const _formData = deepClone(toRaw(formData)); // 拷贝一份原始的表单数据（用于还原数据使用）

    /**
     * 打开、关闭新增编辑弹框
     * @param show true :打开 false 关闭
     * @param data
     */
    function toggleEditorModal(show, data = {}) {
      formData.show = show;
      formData.data = Object.assign(
          {}, // Object.assign 会填充到第一项的参数，使用一个{}空对象 防止数据污染
          _formData.data, // 备份的原始数据
          data, // 编辑时该数据不为空 可填充 覆盖 原始数据_formData.data
      );
      if (formRefName.value) {
        formRefName.value.resetFields(); // 清除表单的验证信息
      }

    }

    // 新增、编辑提交
    function onSubmit() {
      if (!formRefName.value) {
        Toast.error('找不到表单')
        return;
      }
      formRefName.value.validate(async (valid) => {
        if (!valid) { // 表单验证不通过
          return;
        }
        // 拷贝一份表单数据
        const _formData = deepClone(toRaw(formData)).data;
        try {
          let res = {}
          delete _formData.createTime; // 删除多余项目（由于是拷贝的数据，删除不会影响到实际的数据）
          delete _formData.updateTime;
          delete _formData.latelyTime;
          if (_formData.id > 0) { // 编辑操作
            res = await Patient.update(_formData)
            onPageChange(); // 成功则刷新当前页面数据
          } else { // 新增操作
            delete _formData.id;
            res = await Patient.create(_formData);
            onPageChange(1); // 成功则刷新页面 （新增操作 将请求第一页的数据）
          }
          Toast.success(res.message || '操作成功');
          toggleEditorModal(false); //关闭新增、编辑弹框
        } catch (e) { // 新增、编辑操作提交错误或者失败
          Toast.error(e.message);
        }

      })
    }

    // 删除一行数据
    async function onDestroy(row) {
      const canDestroy = await Toast.confirm();
      if (!canDestroy) { // 用户选择了取消操作
        return;
      }
      try {
        const res = await Patient.destroy(row.id);
        Toast.success(res.message || '删除成功');
        // 删除成功刷新数据
        if (tableData.value.length === 1) {
          onPageChange(1); // 当前页面删除只剩最后一条时，请求第一页。
        } else {
          onPageChange(); // 否则刷新当前页面即可

        }
      } catch (e) {
        console.log(e)
        Toast.error(e.message || '删除失败')
      }
    }

    /**
     * 获取列表数据
     * @param page 页码 当page===undefined时表示刷新当前页面
     * @returns {Promise<void>}
     */
    async function onPageChange(page) {
      const pageMeta = deepClone(toRaw(pageHandle.pageMeta.value)); // 拷贝一份分页配置参数
      if (page) { // 存在页码时 请求页面
        pageMeta.index = page; // @注1
      }
      // if (userInfo.value.role !== 'admin') {
      //   pageMeta.doctorCode = userInfo.value.code;
      // }
      try {
        const {data} = await Patient.lists({
          ...pageMeta, // 公共分页数据（页码、每页请求数量等）
          ...params, // 筛选参数（关键词搜索等额外参数）
        });
        tableData.value = (data.data || []).map(v => {
          if (v.treatTime) { // 存在最近的就诊时间则格式化
            v.treatTime = dayjs(v.treatTime).format("YYYY-MM-DD HH:mm:ss");
          }
          return v
        }); // 取到数据后直接覆盖旧的列表数据即可


        pageHandle.updatePageMeta(pageMeta.index, data.count); // 取到数据后，更新公共的分页配置数据（@注1）

      } catch (e) {
        console.log(e);
      }
    }

    return {
      ...pageHandle,
      params,
      onSubmit,
      formData,
      formRefName,
      toggleEditorModal,
      onDestroy,
      tableData,
      onPageChange,
    }
  }
  ,
})
</script>

<style lang="scss" scoped>

</style>
